<template>
  <section class="content-title">
    <svg-icon :icon-class="svgIconClass" class-name='icon'></svg-icon>
    <span>{{title}}</span>
  </section>
</template>

<script lang="ts" setup>
defineProps({
  title: {
    type: String,
    default: '',
  },
  svgIconClass: {
    type: String,
    default: '',
  }
})
</script>

<style lang="scss" scoped>
.content-title {
  display: flex;
  align-items: center;
  font-size: 26px;
  font-weight: 800;
  margin: 20px 0;
  transition: all 0.4s ease;

  .icon {
    margin-right: 8px;
    height: 26px;
    width: 26px;
    fill: var(--fill);
  }

  &:hover {
    transform: translateY(-5px);
  }
}
</style>
